<template>
  <div class="FormContentCenter-Container border px-3">

    <div class="dnd-wrap" id="dnd">
      <div @mousedown="startDrag">
        Rect
      </div>
    </div>

    <div class="min-map" id="minimap"></div>

    <div id="container"></div>
    <TeleportContainer />

  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import CustomNode from './CustomNode.vue'
import { Graph } from '@antv/x6'
import { register, getTeleport } from '@antv/x6-vue-shape'
import { Snapline } from '@antv/x6-plugin-snapline'
import { Selection } from '@antv/x6-plugin-selection'
import { MiniMap } from '@antv/x6-plugin-minimap'
import { Keyboard } from '@antv/x6-plugin-keyboard'
import { History } from '@antv/x6-plugin-history'
import { Clipboard } from '@antv/x6-plugin-clipboard'
import { Dnd } from '@antv/x6-plugin-dnd'
import TextImg from '../../../assets/text.png'

let graph: Graph
let dnd: Dnd

register({
  shape: 'custom-node',
  width: 100,
  height: 100,
  component: CustomNode,
})
const TeleportContainer = getTeleport()




const initGraph = () => {
  graph = new Graph({
    container: document.getElementById('container'),
    panning: false,
    mousewheel: true,
    width: 1200,
    height: 880,
    background: {
      color: '#F2F7FA',
    },
    grid: {
      visible: true,
      type: 'doubleMesh',
      args: [
        {
          color: '#eee', // 主网格线颜色
          thickness: 1, // 主网格线宽度
        },
        {
          color: '#ddd', // 次网格线颜色
          thickness: 1, // 次网格线宽度
          factor: 4, // 主次网格线间隔
        },
      ],
    },

  })

  addNode()
  usePlugin()
  addMouseKey()

  dnd = new Dnd({
    target: graph,
    scaled: false,
    dndContainer: document.getElementById('dnds'),
  })


}

const startDrag = (e: MouseEvent) => {
  console.log('e::: ', e);
  const target = e.currentTarget as HTMLDivElement
  console.log('target::: ', target);
  const type = target.getAttribute('data-type')
  const node = graph.createNode({
    width: 155,
    height: 50,
    shape: 'custom-node',
  })

  dnd.start(node, e)
}

const addNode = () => {
  graph.addNode({
    x: 0,
    y: 160,
    width: 155,
    height: 50,
    shape: 'custom-node',

  })

  graph.addNode({
    x: 200,
    y: 160,
    width: 155,
    height: 50,
    shape: 'custom-node',

  })
}

const usePlugin = () => {
  graph.use(
    new Snapline({
      enabled: true,
    }),
  )

  graph.use(
    new Selection({
      enabled: true,
      multiple: true,
      rubberband: true,
      movable: true,
      showNodeSelectionBox: true,
    }),
  )

  graph.use(
    new Clipboard({
      enabled: true,
    }),
  )

  // graph.use(
  //   new MiniMap({
  //     container: document.getElementById('minimap'),
  //     width: 400,
  //       height: 200,
  //       padding: 10,
  //   }),
  // )

  graph.use(
    new History({
      enabled: true,
    }),
  )

  graph.use(
    new Keyboard({
      enabled: true,
    }),
  )
}

const addMouseKey = () => {
  graph.bindKey('ctrl+z', () => {
    if (graph && graph.canUndo()) {
      graph.undo()
    }
  })

  graph.bindKey('ctrl+c', () => {
    const selectedCells = graph.getSelectedCells()
    if (selectedCells.length > 0) {
      graph.copy(selectedCells)
    }
  })


  graph.bindKey('ctrl+v', () => {
    graph.paste({ offset: 32 })
  })
}





onMounted(() => {
  initGraph()
})

</script>

<style lang="less" scoped>
.FormContentCenter-Container {
  height: 100%;
  width: 100%;
  position: relative;
}

.min-map {
  position: absolute;
  right: 0;
  z-index: 99;
}
</style>